<!-- 置于页面下方的标签页 -->
<template>
    <div class="main" style="height:fit">
        <el-tabs :tab-position="tabPosition" style="height: auto" class="demo-tabs">

            <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        <!-- {{ StuId }} 基本情况 -->
                        基本情况
                    </div>
                </template>
                <div>
                    <StuInformationCopy />
                </div>
            </el-tab-pane>

            <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        选择课程
                    </div>
                </template>
                <div class="row-container">
                    <div class="row-item" v-for="(item, index) in SelectedCourseImg" :key="index" style="margin:5px">
                        <div style="width: 80%; height: auto" class="item">
                            <el-image style="width: auto; height: 200px;margin-right: 10px;" :src="item.src"
                                :fit="fit" />
                            <p style="font-weight:bold ;font-size:0.5em;color:balck">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane>
                <template #label>
                    <div class="cell-item" style="font-size:1.5em;color:balck;font-weight: bold;">
                        <el-icon :style="iconStyle">
                            <TrophyBase />
                        </el-icon>
                        推荐课程
                    </div>
                </template>
                <div class="row-container">
                    <div class="row-item" v-for="(item, index) in RecommendedCourseImg" :key="index">
                        <div style="width: 80%; height: auto" class="item">
                            <el-image style="width: auto; height: 200px" :src="item.src" :fit="fit" />
                            <p style="font-weight:bold ;font-size:0.5em;color:balck">{{ item.name }}</p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import StuInformationCopy from './StuInformation copy.vue';

const props = defineProps({
  StuId: String
});

const SelectedCourseImg = ref([
    { name: '1+X初级认证考试', src: new URL('../../assets/c1.jpg',import.meta.url).href, alt: 'c1' },
    { name: '1+X中级认证考试', src: new URL('../../assets/c2.jpg',import.meta.url).href, alt: 'c2' },
    { name: '1+X高级认证考试', src: new URL('../../assets/c3.jpg',import.meta.url).href, alt: 'c3' },
    { name: '前置知识-基于卷积神经网络的人脸识别', src: new URL('../../assets/course345.jpg',import.meta.url).href, alt: 'c3' },
])

const RecommendedCourseImg = ref([
    { name: "AIGC职业", src: new URL('/src/assets/course111.jpg',import.meta.url).href, alt: 'c1' },
    { name: "人工智能编程", src: new URL('../../assets/course119.jpg',import.meta.url).href,  alt: 'c1' },
    { name: "PowerBI 数据分析与可视化", src: new URL('../../assets/course180.jpg',import.meta.url).href, alt: 'c1' },
    { name: 'Scala技术基础', src:new URL('../../assets/course16.jpg',import.meta.url).href, alt: 'c3' },
    { name: 'Python数据分析与应用', src:new URL('../../assets/course22.jpg',import.meta.url).href, alt: 'c3' },
    { name: 'Python网络爬虫', src:new URL('../../assets/course476.jpg',import.meta.url).href, alt: 'c3' },
    { name: 'Python机器学习', src:new URL('../../assets/course477.jpg',import.meta.url).href, alt: 'c3' },
    { name: 'TensorFlow实战', src:new URL('../../assets/course478.jpg',import.meta.url).href, alt: 'c3' },
])

const tabPosition = ref('left')
</script>


<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 10px;
    /* color: #6b778c; */
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}


.row-item {
    width: 30%; /* 设置每个项目占据父容器的30%宽度 */
    /* background-color: lightblue; */
    /* padding: 20px; */
    /* margin: 10px; */
    box-sizing: border-box;
    border-radius: 10px;
    flex-shrink: 0;
}

.row-container {
    overflow-x:auto;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    /* width: auto; */
    justify-content: flex-start; /* 设置内容从左侧开始排列 */
}


@media (max-width: 768px) {
    .row-container .el-image {
        flex: 0 0 calc(50% - 10px);
        /* 小于768px宽度时，每个图片占据1/2，并且减去间距 */
    }
}
</style>
